import React, { Component } from 'react'
import './List.css';
import { Table,Button,Modal,message} from 'antd';
import 'antd/dist/antd.css';
import axios from 'axios'
export default class List extends Component {
    constructor(props) {
        super(props);
        this.state ={
        }
      }
      handleOk = e => {
        this.setState({
          visible: false,
        });
      };
    
      handleCancel = e => {
        this.setState({
          visible: false,
        });
      };
      nameHandleChange = e =>{
        this.setState({
            name : e.target.value  
      })
      }
      describeHandleChange = e =>{
        this.setState({
            describe : e.target.value  
      })
      }
      stockHandleChange = e =>{
        this.setState({
            stock : e.target.value  
      })
      }
      priceHandleChange = e =>{
        this.setState({
            price : e.target.value     
      })
      }
      async sureEdit(record,e){
        if(this.state.name === undefined){
          await this.setState({
            name : record.name     
          })
        }
        if(this.state.describe === undefined){
          await this.setState({
            describe : record.describe     
          })
        }
        if(this.state.stock === undefined){
          await this.setState({
            stock : record.stock     
          })
        }
        if(this.state.price === undefined){
          await this.setState({
            price : record.price     
          })
        }
       let obj = {
         name:this.state.name,
         describe:this.state.describe,
         stock:this.state.stock,
         price:this.state.price,
       }
      //  发起请求
       axios({
         method:'post',
         url:'http://123.57.67.148:3000/mock/195/CMeditGoods',
         data:obj,
       }).then(res=>{
         if(res.data.mesg === '成功'){
          this.setState({
            visible: false,
          });
          message.success('修改成功！！');
    
         }else{
          this.setState({
            visible: false,
          });
          message.error('修改失败!!');
         }
       })
      }
      editGoods(record,e){
        this.setState({
          visible: true,
        })
      }
      deleteGoods(record,e){
        let obj = {
          id:record.id
        }
        axios({
          method:'post',
          url:'http://123.57.67.148:3000/mock/195/CMdeleteGoods',
          data:obj,
        }).then(res=>{
          if(res.data.mesg === '成功'){
            message.success('删除成功！！');
           }else{
            message.error('删除失败!!');
           }
        })
      }
      componentDidMount() {
        axios({
          method:'get',
          url:'http://123.57.67.148:3000/mock/195/CMgetGoodsData',
        }).then(res=>{
          console.log(res.data,99)
          this.setState({
            goodsData:res.data,
            columns:[
              {
                title: 'id',
                dataIndex: 'id',
                key: 'id',
                align: 'center'
              },
              {
                title: '图片',
                key:'img',
                render: (record) => {
                  return <div className = 'imgBox'>
                    <img src={record.img} alt=""/>
                    </div> 
                } ,
                align: 'center'
              },
              {
                title: '名字',
                dataIndex: 'name',
                key: 'name',
                align: 'center'
              },
              {
                title: '描述',
                dataIndex: 'describe',
                key: 'describe',
                align: 'center'
              },
              {
                title: '价格',
                dataIndex: 'price',
                key: 'price',
                align: 'center'
              },
              {
                title: '库存',
                dataIndex: 'stock',
                key: 'stock',
                align: 'center'
              },
              {
                title:'操作',
                key: 'operation',
                render: (record) => {
                  return <div className = 'operate'>
                    <Button type="primary" style = {sty} onClick = {e=> this.editGoods(record,e)}>修改</Button>
                    <Modal
                      title="修改"
                      visible={this.state.visible}
                      onOk={e => this.sureEdit(record,e)}
                      okText = '保存'
                      cancelText ='取消'
                      onCancel={this.handleCancel}
                    >
                    <input type="text" placeholder = {record.name} className ='myinput' onChange = {this.nameHandleChange}/>
                    <input type="text" placeholder = {record.describe} className ='myinput' onChange = {this.describeHandleChange} />
                    <input type="text" placeholder = {record.stock} className ='myinput' onChange = {this.stockHandleChange} />
                    <input type="text" placeholder = {record.price}className ='myinput' onChange = {this.priceHandleChange} />
                    </Modal>
                    <Button type="primary" danger onClick = {e=> this.deleteGoods(record,e)}>删除</Button>
                    </div> 
                } ,
                align: 'center'
              }
            ],
            pagination:{
              position:['bottomCenter'],
              defaultCurrent:1,//当前页
              pageSize:5,//每页条数
              hideOnSinglePage:true,//只有一页隐藏分页
              total:res.data.length,//数据总数
            }
          })
        })
      }
    render() {
        console.log(111)
        return (
            <div className = 'List'>
               <Table dataSource={this.state.goodsData} columns={this.state.columns} pagination = {this.state.pagination}/> 
            </div>
        )
    }
}
const sty = {
    marginRight:'5px',
  }